<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h1>当前计数: {{counter}}</h1>
<!-- 方法一： <button v-on:click="counter++">+</button>   v-on：监听事件 click:表示监听的是click事件-->
<!--        <button v-on:click="counter--;">-</button>-->
  <button v-on:click="add">+</button> <!--v-on:click指令：用于监听某个元素的点击事件，并需要指定发生点击时
    ，执行的方法（方法通常是methods中定义的方法）-->
  <button v-on:click="sub">-</button>
</div>


<script src="../js/vue.js"></script>
<script>
  // 语法糖：简写
    const app=new Vue({
      el: '#app',
      data: {
        counter: 0
      },
      methods:{  //methods属性：该属性用于在vue对象中定义方法
        add:function (){
          console.log('add被执行');
          this.counter++;   // this表示当前对象 即app.counter;  直接用counter会找全局里面去
        },
        sub:function(){ // sub表示函数的名字
          console.log('sub被执行');
          this.counter--;
        }
      }
    })
   /*
   vue的option选项
   * el:
   *   类型：string/ HTMLElement
   *   作用：决定之后vue实例会管理哪一个dom
   * data:
   *   类型：object / function(组件当中data必须是一个函数)
   *   作用：vue实例对应的数据对象
   * methods：
   *    类型：{[key:string]:function}
   *    作用：定义属于vue的一些方法，可以在其他地方调用，也可以在指令中使用
   * */
</script>
</body>
</html>